<script type="text/javascript">
$(function () {
    $("#content_table").jqGrid({
        //url: "example.php",
        datatype: "local",//"xml",
        //mtype: "GET",
        colNames: ["Название", "Единица измерения","Шаг", ""],
        colModel: [ 
            { name: "name", width: 270, align: "left" },
            { name: "unit", width: 70,editable:true, align: "left"},
						{ name: "volume_increment", width: 70,editable:true, align: "right"},
            { name: "action", width: actionPaneWidth, formatter: formater_row_actions,
                        formatoptions: {  }       
            }
        ],
        //datatype: "jsonstring",
        data:[
        <?php
        $c="";
        while ($row = $content_data["products_ds"]->fetch_assoc()) {
        ?>
        	<?php echo $c?>{"id" :"<?php echo $row['id']?>", "name" :"<?php echo $row['name']?>"
						,"unit":"<?php echo $row['unit']?>"
						,"volume_increment":<?php echo $row['volume_increment']?>
						,action:""}
 				<?php
 					$c=",";
				}
				?>
        ],
        pager: "#pager",
        rowNum: 200,
        rowcontent_table: [10, 20, 30],
        viewrecords: true,
        gridview: true,
        autoencode: true,
        caption: "Справочник товаров",
        height:400,
        shrinkToFit:false,
        //editurl: "server.php",
        autowidth:true,
				ondblClickRow:function(rowid, row, col, e){
					openEditDialog(rowid)				
				}
    });
    jQuery("#content_table")
			.navGrid('#pager',{edit:false,add:false,del:false,search:false,refresh:false})
			.navButtonAdd('#pager',{
   		caption:"Добавить", 
   		buttonicon:"ui-icon-plus", 
   		onClickButton: function(){ 
     	  openEditDialog(null)
   		}, 
   		position:"last"
		})

    $("#edit_unit_dialog").dialog({
    	width:400,
    	modal:true,
    	autoOpen:false,
    	title:"Редактировать запись"
    }); 
    $( "input[type=button]" ).button();
    //$( "select" ).selectmenu({width:200});
    $( "#volume_increment" ).spinner({step:0.1});
}); 
var fieldIds=["unit","name","volume_increment"]
	function openEditDialog(id)
	{
		 var row=$("#content_table").getRowData(id);
		 $("#id").val(id)
		 for(var i=0;i<fieldIds.length;i++)
		 {
		 	$("#"+fieldIds[i]).val(row[fieldIds[i]])
		 }
		 $("#edit_unit_dialog").dialog("open");
	}
	function saveRecord()
	{
		$("#edit_unit_dialog").dialog("close");
		$.ajax({
			type:"post",
			url:"action.php?"+$("#editForm").serialize(),
			data:{
				action:"saveProduct"
			},
			dataType:"json",
			error:function(q,w,e){
				alert("All bed :(")
			},
			success:function(data){
				if(data.status!="ok")
				{
					alert(data.error)
					return;
				}
				if($("#id").val())
					jQuery("#content_table").jqGrid('setRowData',data.recordId,data.record);
				else
					jQuery("#content_table").jqGrid('addRowData',data.recordId,data.record);
					
			}
		})
	}
	function cancelEdit()
	{
		$("#edit_unit_dialog").dialog("close");
	}

</script>

		  <table id="content_table"><tr><td></td></tr></table> 
		  <div id="pager"></div> 
		  <div id="edit_unit_dialog">
		  	<form id="editForm">
		  		<input type="hidden" name="id" id="id"/>
		       <table>
		       	<tr>
		       		<td class="edit_field_name">Продукт</td>
		       		<td class="edit_field"><input type="text" name="name" id="name"/></td>
		       	</tr>
		       	<tr>
		       		<td class="edit_field_name">Единица измерения</td>
		       		<td class="edit_field">
								<select name="unit" id="unit">
		       			<?php
        while ($row = $content_data["units_ds"]->fetch_assoc()) {
        ?>
        	<option id="<?php echo $row['unit']?>" title="<?php echo $row['description']?>"><?php echo $row['unit']?></option>
 				<?php
				}
				?>
		       			</select>
		       		</td>
		       	</tr>
		       	<tr>
		       		<td class="edit_field_name">Шаг изменения</td>
		       		<td class="edit_field"><input type="text" name="volume_increment" id="volume_increment"/></td>
		       	</tr>
		       </table>
		    </form>
		       <input type="button" value="Сохранить" onclick="saveRecord()">
		       <input type="button" value="Отменить" onclick="cancelEdit()">
		  </div>
		  